import React, { Component, PropTypes } from 'react';
import { InputItem, Button, WingBlank, WhiteSpace, List, Flex, NavBar, Icon, Toast, Popup, Menu } from 'antd-mobile';
import { Link } from 'react-router';
import { checkMobile, parseMobile, toastFail } from '../utils/func';

export default class Login extends Component {
	constructor(props){
		super(props);
		this.state = {
			username : '小张',
			password : 'x3fo3y',
			school_id : 0
		}
	}

	componentWillMount(){
		let { schoolList, initSchoolList } = this.props;
		if (typeof(schoolList.schoolObjList) == 'undefined' || typeof(schoolList.schoolData) == 'undefined'){
			initSchoolList();
		}
	}

	doLogin(){
		let { login } = this.props;
		if (this.state.username.length == 0 || this.state.password.length == 0){
			toastFail('请填写账号密码', 1);
			return false;
		}
		if (this.state.school_id == 0) {
			toastFail('请选择所属学校', 1);
			return false;
		}
		login(this.state.username, this.state.password, this.state.school_id);
	}

	showSchoolContainer(){
		let { schoolList } = this.props;
		Popup.show(<div>
			<div className='popup_title title_underline'>
	          <div>请选择所属学校</div>
	          <div><span onClick={() => Popup.hide()}><Icon type="cross" /></span></div>
	        </div>
      	  	<Menu 
	      	  	data={schoolList.schoolData} 
	      	  	level={1} 
	      	  	onChange={(v) => {this.setState({school_id:v[0]});}} height={Math.round(document.documentElement.clientHeight / 3)} 
      	  	/>
	    </div>, { animationType: 'slide-up' });
	}
	
  

	render() {
		let { gotoRegister, gotoFindPassword, schoolList } = this.props;
		return (
				<div>
					<NavBar iconName='' mode="light" onLeftClick={(e) => {}}
					className='my_navbar_title'
				    >教师登录</NavBar>
				    <div className='my_container_blank'></div>
					<WhiteSpace size="md" />
					
					<List>
					  <InputItem
				        name="mobile"
				        type="text"
				        value={this.state.username}
						onChange={(value)=>{this.setState({username:value}); this.doClear();}}
				        placeholder="请填写用户名"
				      >用户名</InputItem>

				      <WhiteSpace size="md" />
				      <InputItem
				        name="repassword"
				        type="password"
				        value={this.state.password}
						onChange={(value)=>{this.setState({password:value});}}
				        placeholder="请填写登录密码"
				      >密码</InputItem>


				      <WingBlank>
				      	<div className='select_school_btn' 
				      		onClick={(e) => {this.showSchoolContainer();}}>
				      		所属学校：
				      		{this.state.school_id > 0 ? schoolList.schoolObjList['school_' + this.state.school_id]['title'] : '请点击此处选择'}
				      	</div>
				      </WingBlank>
				     
				      <WhiteSpace size="md" />
					  <WingBlank size="md">
					  	<Button type="primary" onClick={(e) => {this.doLogin();}}>登录</Button>
					  </WingBlank>
					  <WhiteSpace size="md" />
				  </List>
				</div>
			);
	}
}